<template>
  <!-- 方案规划导航栏 -->
  <div style="background: #202B61; width: 87.4%;height: auto;;text-align: center;position: absolute;background-color: #202B61;">
    <!-- 顶部tab切换 -->
    <div style="width: 99%; height: 8vh; position: absolute;margin: 0 auto;text-align: left;">

      <div style="color: #ffffff;padding: 10px;font-size: 1vw;margin: 0vh auto;width: 99%;height: 5vh;border-radius: 6px;background: #161e43;background-image: linear-gradient(to right, #20347b, #0b2f577a);border-bottom: 3px solid rgb(70 127 211 / 44%);">
        <div style="display: inline;width: 20%;padding-right: 4vh;">项目名称：{{ projectName }}</div>
        <div style="display: inline;width: 20%;padding-right: 4vh;">项目类型：{{ type }}</div>
        <div style="display: inline;width: 20%;padding-right: 4vh;">项目类别：{{ category }}</div>
        
          
        <el-link @click="backProject" style="float: right;font-size: 1vw;color: #ffffff;">返回</el-link>

     
       </div>
      

      <!-- <div id="padDiv1" @click="buttonClick('elecWaterPlanDesign', 'padDiv1')" class="buttonStyle">制(储)氢系统规划设计</div>
      <div id="padDiv2" @click="buttonClick('hydrogenTransmissionPlanDesign', 'padDiv2')" class="buttonStyle">输氢系统规划设计</div>
      <div id="padDiv3" @click="buttonClick('hydrogenEnergyPlanDesign', 'padDiv3')" class="buttonStyle">氢能综合供能场景规划设计</div>
      <div id="padDiv4" @click="buttonClick('integratedEnergyPlanDesign', 'padDiv4')" class="buttonStyle">综合能源系统规划设计</div>  -->
     
    </div>

    <div style="margin-left: 1vh;margin-right: 1vh;margin-top: 1%; width: 99%;height: auto;float: left;position: absolute;">
      <!--路由页面-->
      <router-view :key="activeDate"></router-view>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'planAndDesign',
    data() {
      return {
        windowDatate: '',
        activeDate: '',
        type: '',
        projectId: '',
        projectName: '',
        pageName: '',
        type:"",
        category:'',
        typeOptions:[
          {value:"1",label:"经济性分析"},
          {value:"2",label:"规划设计"},
        ],
      
        categoryTableOptions:[
          {value:"1",label:"制氢环节"},
          {value:"2",label:"输氢环节"},
          {value:"3",label:"用氢环节"}, 
          {value:"4",label:"制(储)氢系统规划设计"},
          {value:"5",label:"输氢系统规划设计"},
          {value:"6",label:"氢能综合供能场景规划设计"},
          {value:"7",label:"综合能源系统规划设计"}, 
        ], 
        sourceProjectPageName : "",
      }
    },
    mounted: function() {
       
  var pageName = this.$route.query.pageName;

      this.sourceProjectPageName = this.$route.query.sourceProjectPageName;

      this.projectName = this.$route.query.projectName;

      var type = this.$route.query.type;
      var category = this.$route.query.category;

      if(type=="1"){
        this.type = "经济性分析";
      }else if(type=="2"){
        this.type = "规划设计";
      } 

      if(category=="1"){
        this.category = "制氢环节";
      }else if(category=="2"){
        this.category = "输氢环节";
      }else if(category=="3"){
        this.category = "用氢环节";
      }else if(category=="4"){
        this.category = "制(储)氢系统规划设计";
      }else if(category=="5"){
        this.category ="输氢系统规划设计";
      }else if(category=="6"){
        this.category = "氢能综合供能场景规划设计";
      }else if(category=="7"){
        this.category = "综合能源系统规划设计";
      }

      //获取项目id
      this.projectId = this.$route.query.projectId;
      this.pageName = this.$route.query.pageName;;
      this.activeDate = new Date().getTime();

     
      if(pageName=="elecWaterPlanDesign"){
        $("#padDiv1").css("border-bottom","3px solid rgb(64, 158, 255)");  
        this.$router.push({path:'/elecWaterPlanDesign',query:{"projectId":this.projectId}})

      }else if(pageName=="hydrogenTransmissionPlanDesign"){
        $("#padDiv2").css("border-bottom","3px solid rgb(64, 158, 255)");  
        this.$router.push({path:'/hydrogenTransmissionPlanDesign',query:{"projectId":this.projectId}})

      }else if(pageName=="hydrogenEnergyPlanDesign"){
        $("#padDiv3").css("border-bottom","3px solid rgb(64, 158, 255)");  
        this.$router.push({path:'/hydrogenEnergyPlanDesign',query:{"projectId":this.projectId}})

      }else if(pageName=="integratedEnergyPlanDesign"){
        $("#padDiv4").css("border-bottom","3px solid rgb(64, 158, 255)");  
        this.$router.push({path:'/integratedEnergyPlanDesign',query:{"projectId":this.projectId}})

      }
      
    },
    methods: {
      
      backProject(){
        this.$router.push({path:'/'+this.sourceProjectPageName})
      },
      buttonClick : function(type,divId){
        for(var i = 1;i<=4;i++){
          $("#padDiv"+i).css("border-bottom","none");
        }
        $("#"+divId).css("border-bottom","3px solid rgb(64, 158, 255)");
        this.activeDate = new Date().getTime();
        //路由跳转
        this.$router.push({path:'/'+type,query:{"projectId":this.projectId}})

      },
       
    }
  }
</script>

<style scoped>
  .buttonStyle {
    height: 5vh;
    width: 24%;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor:pointer;
    border-radius: 10px;
    font-family: Arial;
    border:none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #161E43;
    text-align:center;
    line-height:5vh;
    vertical-align: middle;
    text-decoration: none;
  }
</style>
